<template>
  <div class="form">
    <el-form ref="excelForm" :model="excelForm" :rules="rules" label-width="100px">
      <el-form-item label="场景选择" prop="sceneId">
        <el-select v-model="excelForm.sceneId" placeholder="请选择场景">
          <el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="报表类型" prop="type">
        <el-select v-model="excelForm.type" placeholder="请选择报表类型">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择" prop="timeSel">
        <el-date-picker v-model="excelForm.timeSel" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="dateOptions" />
        <!-- <el-date-picker v-if="excelForm.type === 1" v-model="excelForm.timeSel" type="date" placeholder="选择日期" :picker-options="dateOptions" />
        <el-date-picker v-else-if="excelForm.type === 2" v-model="excelForm.timeSel" type="week" format="yyyy 第 WW 周" placeholder="选择周" :picker-options="weekOptions" />
        <el-date-picker v-else-if="excelForm.type === 3" v-model="excelForm.timeSel" type="month" placeholder="选择月" :picker-options="monthOptions" /> -->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <p class="add" @click="exportExcel('excelForm')">导出报表</p>
    </div>
  </div>
</template>
<script>
import { getSceneAll } from '@/api/scene'
import { validateExcel } from '@/utils/validate'
export default {
  data() {
    return {
      excelForm: {
        timeSel: [],
        sceneId: '',
        type: null
      },
      sceneList: [],
      typeList: [{
        id: 1,
        name: '日报'
      }, {
        id: 2,
        name: '周报'
      }, {
        id: 3,
        name: '月报'
      }],
      dateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
        }
      }
      // dateOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
      //   },
      //   firstDayOfWeek: 1
      // },
      // weekOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() - parseTime(Date.now(), '{a}') * 24 * 60 * 60 * 1000
      //   },
      //   firstDayOfWeek: 1
      // },
      // monthOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() - parseTime(Date.now(), '{d}') * 24 * 60 * 60 * 1000
      //   },
      //   firstDayOfWeek: 1
      // }
    }
  },
  computed: {
    rules() {
      // 返回表单验证
      return validateExcel
    }
  },
  mounted() {
    this.getScene()
  },
  methods: {
    // 获取场景list
    getScene() {
      getSceneAll().then(res => {
        this.sceneList = res.data
      })
    },
    // 报表类型转变
    typeChange() {
      this.excelForm.timeSel = null
    },
    // 导出报表
    exportExcel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let routes = this.$router.resolve({ path: '/dataExcel', query: { data: JSON.stringify(this.excelForm) }})
          window.open(routes.href, '_blank')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.add {
  width:133px;
  height:46px;
  border-radius:23px;
  font-size:16px;
  line-height:46px;
  text-align: center;
  letter-spacing: 3px;
  cursor: pointer;
  background:rgba(10,210,57,0.6);
  border:1px solid rgba(10,210,57,1);
  color:rgba(255,255,255,1);
}
</style>
